<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>felx</title>
    <style>
        html,body,.boss{
            height: 100%;
        }
        /* 初始化页面 */
        *{
            margin: 0;
            padding: 0;
        }
        .boss{
            /* 弹性盒子布局 */
            display: flex;
            /* 改变 主轴的方向 */
            flex-direction: column;
        }
        /* 头部布局 */
        header{
            height: 60px;
            width: 100%;
            background-color: #373d41;
            /* 弹性盒子布局 */
            display: flex;
            /* 侧轴(y轴) 上局中 */
            align-items: center;
            /*  主轴(x轴) 上 靠两边排列 */
            justify-content: space-between;
            /* 缩小比例 */
            flex-shrink: 0;                 
        }
        header .image{
            /* 弹性盒子布局 */
            display: flex;
            /* 侧轴(y轴) 上局中 */
            align-items: center;
        }
        header span{
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }
        header button{
            width: 69px;
            height: 35px;
            border: none;
            border-radius: 5px;
            background-color: #909399;
            margin-right: 50px;
            color: white;
        }

        /* 下部分 */
        .box{
            height: 100%;
            display: flex;
            /* 主轴(x) 靠两边摆列 */
            justify-content: space-between;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        /* 左边 */
        .left{
            width: 200px;
            height: 100%;
            background-color: #333744;
            /* 溢出滚动条 */
            overflow: auto;
        }

        /* 右边 */
        .right{
            /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 后两个属性可选 */
            flex: 1;
            height: 100%;
            background-color: #eaedf1;
            /* 溢出滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="boss">

        <!-- 头部布局 -->
        <header>
            <div class="image">
                <img src="1.png" alt="">
                <span>
                    me 的电商后台管理
                </span>
            </div>
            <button>退出</button>
        </header>
        <!-- 下部 -->

        <div class="box">
            <!-- 侧边栏 -->
            <div class="left">
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                
            </div>
            <!-- 右边内容 -->
            <div class="right">
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 

                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
                11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 <br>11111111111111111111 
            </div>
        </div>
            
    </div>
</body>
</html>